import React, { useState } from "react";
import ZoneTableModal from '@views/zoneData/component/ZoneTableModal/ZoneTableModal'
import tableZoneConfig from "./zoneTableConfig";

const mork = [{
    name: '上证指数',
    id: '000001',
    col1: '-10.02%',
    col2: '-13.29%',
    col3: '+3.29%',
    col4: '-2.29%',
    col5: '4.29%',
    col6: '19.29%',
    col7: '34.11%',
    col8: '78.46%'
}]
function TableZoneData(){
    const [isModalOpen, setIsModalOpen] = useState(false); // 控制弹框显示状态
    const showTip = () => setIsModalOpen(!isModalOpen); 
    //表格配置
    const { typeName, chg, valuation} = tableZoneConfig;

    return (
        <div className="tableView">
            <div className="tableTitle flex-row">
                <div className="table_col_1">
                    <div className="table_col_height"></div>
                    <div className="table_col_height"></div>
                    {mork.map(item =>
                        <div className="border table_col_height">
                            <div className="text_100">{item[typeName.nameProps]}</div>
                            <div className="text_101">{item[typeName.idProps]}</div>
                        </div>
                    )}
                </div>
                <div className="tableTitle_text">
                    <div className="border">涨跌幅</div>
                    <div className="tableContent border flex-row">
                        {chg.map(item=>
                            <div className="table_col_2">
                                <div className="table_label">
                                    <div>{item.label[0]}</div>
                                    <div>{item.label[1]}</div>
                                </div>
                                {mork.filter(v=>v[item.props]).map(v =>  <div className="table_col_height">
                                            {v[item.props]}</div>)}
                            
                            </div>
                        )}
                    </div>
                </div>
                <div className="tableTitle_text">
                    <div className="border">
                        <div className="flex-row justify-center">
                            <div>
                                估值
                            </div>
                            <div 
                                onClick={showTip}
                                className="tableTitle_img"
                            />
    
                        </div>
                    </div>
                    <div className="tableContent border flex-row">
                        {valuation.map(item=>
                            <div className="table_col_2">
                               <div className="table_label">
                                   <div>{item.label[0]}</div>
                                   <div>{item.label[1]}</div>
                               </div>
                               {mork.filter(v=>v[item.props]).map(v =>  <div className="table_col_height">
                                {v[item.props]}</div>)}
                           </div>
                        )}
                     
                    </div>
                </div>
            </div>
            <ZoneTableModal isOpen={isModalOpen} onClose={showTip}/>
        </div>
    );
}
export default TableZoneData;
  